<style lang="scss" scoped>
    .headImgUrl{
        width:90px;
        height:90px;
        border-radius: 50%;
    }
    .form-item-text{
        line-height: 34px;
    }
</style>
<template>
    <div class="page-container">
        <a-form :layout="formLayout" v-show="model">
<!--            <a-form-item label='卡号'  v-bind="formItemLayout">-->
<!--                <a-input placeholder='请输入卡号' v-decorator="['cardNo']" style="width: 300px;" :disabled="true"/>-->
<!--            </a-form-item>-->
            <a-form-item :wrapperCol="{span:18,offset:5}">
                <p class="form-item-text">
                    <img class="headImgUrl" :src="model.headImgUrl" v-if="model.headImgUrl" />
                    <img class="headImgUrl" src="../../../assets/images/mainImage.jpg" v-else />
                </p>
            </a-form-item>
            <a-form-item label="昵称" v-bind="formItemLayout">
                <p class="form-item-text">{{model.nickName}}</p>
            </a-form-item>
            <a-form-item label="姓名" v-bind="formItemLayout">
                <p class="form-item-text">{{model.name}}</p>
            </a-form-item>
            <a-form-item label="联系电话" v-bind="formItemLayout">
                <p class="form-item-text">{{model.phone}}</p>
            </a-form-item>
            <a-form-item label="生日" v-bind="formItemLayout">
                <p class="form-item-text">{{model.birthday}}</p>
            </a-form-item>
            <a-form-item label="注册时间" v-bind="formItemLayout">
                <p class="form-item-text">{{moment(model.registerAt).format('YYYY-MM-DD HH:mm:ss')}}</p>
            </a-form-item>
            <a-form-item label="注册VIP时间" v-bind="formItemLayout">
                <p class="form-item-text">{{moment(model.createAt).format('YYYY-MM-DD HH:mm:ss')}}</p>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
    import {fmMoney} from "../../../utils";
    import moment from 'moment/moment';
    export default {
        props:{
            model:{
                type:Object,
                default:null
            }
        },
        data() {
            return{
                formLayout:'horizontal',
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:18 },
                } : {}
            },
        },
        methods:{
            fmMoney,moment
        }
    }
</script>